<script>
import { getProList } from '../../api/pro';

// 1. 导入插件
import ExportJsonExcel from 'js-export-excel'

export default {
  data () {
    return {
      tableData: [],
      currentPage: 1
    }
  },
  computed: {
    computedTableData () {
      return this.tableData.slice((this.currentPage - 1) * 3, (this.currentPage - 1) * 3 + 3)
    }
  },
  mounted () {
    getProList().then(res => {
      // console.log(res);
      this.tableData = res.data
    })
  },
  methods: {
    exportClick () {
      // 2. 创建导出对象
      let option = { fileName: '小吴导出的文件' }
      option.datas = [
        {
          // 3. 配置需要导出的原数据
          sheetData: this.tableData,
          // 4. 配置工作表名称
          sheetName: '小吴的工作表',
          // 5. 配置需要导出的字段
          sheetFilter: ['proname', 'brand', 'originprice'],
          // 6. 配置表头名称
          sheetHeader: ['商品名称', '商品分类', '商品价格'],
          // 7. 配置每列的宽度
          columnWidths: [20, 40, 60]
        }, {
          // 3. 配置需要导出的原数据
          sheetData: this.tableData,
          // 4. 配置工作表名称
          sheetName: '小汪的工作表',
          // 5. 配置需要导出的字段
          sheetFilter: ['proname', 'brand', 'originprice'],
          // 6. 配置表头名称
          sheetHeader: ['小汪名称', '商品分类', '商品价格'],
          // 7. 配置每列的宽度
          columnWidths: [5, 5, 5]
        }
      ]
      // 8. 通过配置对象创建一个 excel
      let toExcel = new ExportJsonExcel(option)

      // 9. 将 excel 保存在本地
      toExcel.saveExcel()
    }
  }
}
</script>
<template>
  <div>
    <!--
      文件导出有两种常见方法
      第一种：直接给一个 a 标签
          <a href="https://unpkg.com/vue@3/dist/vue.global.js" download="">点击下载 vue3</a>
      第二种：自己将数据处理后保存在本地即可
     -->

    <el-button @click="exportClick"> 文件导出 </el-button>

    <el-table :data="computedTableData">
      <el-table-column type="index" label="序号" />
      <el-table-column label="图片">
        <template #default="scope">
          <div>
            <el-image style="width: 150px;" :src="scope.row.img1"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="名称" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="originprice" label="价格" />
    </el-table>

    <el-pagination background layout="prev, pager, next" :page-size="3" v-model:current-page="currentPage"
      :total="tableData.length" />

  </div>
</template>
